<template>
  <div>

      <!-- 顶部分类 -->
      <el-breadcrumb separator="/">
          <el-breadcrumb-item to="{ path: '/title' }">文章管理</el-breadcrumb-item>
        <el-breadcrumb-item to="{ path: '/title' }">标题</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 添加 -->
      <div class="inputbox">
        <!-- <el-button plain size="medium">添加</el-button> -->

        <el-button @click="dialogFormVisible = true" plain size="medium"
          >添加</el-button
        >
        名称:
        <el-input
          v-model="input"
          placeholder="请输入内容"
          size="medium"
        ></el-input>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="medium"
        ></el-button>
      </div>

      <!-- <div class="updownbox">
            <el-upload
              class="upload-demo"
              drag
              action="https://jsonplaceholder.typicode.com/posts/"
              multiple
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
                <div class="el-upload__tip" slot="tip">
                  只能上传jpg/png文件，且不超过500kb
                </div>
              </div>
            </el-upload>
          </div> -->

      <el-dialog title="添加" :visible.sync="dialogFormVisible">
        <el-upload
          class="upload-demo"
          drag
          action="https://jsonplaceholder.typicode.com/posts/"
          multiple
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或<em>点击上传</em>
            <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </div>
        </el-upload>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false"
            >确 定</el-button
          >
        </div>
      </el-dialog>

      <!-- 表格 -->
      <template>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="photo" label="封面" width="200">
          </el-table-column>
          <el-table-column prop="name" label="名称" width="500">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage1"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="10"
        layout="->,total, sizes, prev, pager, next, jumper"
        :total="80"
      >
      </el-pagination>
  </div>
</template>


<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      input: "",
      // 当前页数
      currentPage1: 1,
      tableData: [
        {
          photo: "",
          name: "标题一",
        },
        {
          photo: "",
          name: "标题二",
        },
        {
          photo: "",
          name: "标题三",
        },
        {
          photo: "",
          name: "标题四",
        },
      ],
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style scoped>

.el-main {
  background-color: #ffffff;
}
.el-menu {
  border: none;
}
.inputbox {
  margin-top: 20px;
}
.el-input {
  width: 300px;
}
.el-button--primary {
  background-color: #ccc;
  border: none;
}
.el-table {
  margin-top: 20px;
}
.el-pagination {
  margin-top: 20px;
}
.updownbox {
  width: 600px;
  height: 400px;
  background-color: #ffffff;
  box-shadow: 0 0 10px #ccc;
  border-radius: 10px;
  text-align: center;
}
.el-upload__text {
  position: relative;
}
.el-upload__tip {
  position: absolute;
  left: 70px;
  bottom: -44px;
}
.upload-demo {
  position: relative;
  top: 20%;
  transform: translateY(-20%);
}
</style>